<template>
	<view class="content">
		<template   v-if="vuex_OSPlat=='ios'">
			<u-navbar :is-back="false" title="通讯录" title-color="#000000" title-bold  title-size="36"
					:background="{ background: '#f1f1f1'}"  :height="44">
				<view slot="right" class="u-p-r-30" @click="toAddFriend()">
					<u-icon name="tianjiayonghu" custom-prefix="custom-icon" size="44" color="#000000"></u-icon>
				</view>
			</u-navbar>
		</template>
		<template v-else>
			<u-navbar :is-back="false" title="通讯录" title-color="#000000" title-bold  title-size="36"
					:background="{ background: '#f1f1f1'}"  :height="44">
					<view  class="u-flex u-row-around u-col-center  u-p-30"
							slot="right" >
						<view class="u-m-r-30">
							<u-icon class="u-clear-icon" @click="toSearch()"  
									:size="46" name="search" color="#606266"></u-icon>
						</view>
						<view>
							<u-icon name="plus-circle" :size="46" color="#606266" @click="showSelect"></u-icon>
						</view>
					</view>		
			</u-navbar>
			<selectInput :list="selectList" :list-key="'name'" :show.sync="selectShow" @on-select="checkSelect" @close="closeSelect" />
		</template>
		
		<view>
			<view v-if="vuex_OSPlat=='ios'">
				<view class="u-flex u-row-center u-col-center u-m-16 u-m-b-20" @click="toSearch()"
						style="background-color: #FFFFFF;height: 80rpx;border-radius: 4rpx;color: #c0c0c0;">
					<view class="u-m-r-20">
							<u-icon class="u-clear-icon" top="6rpx"  :size="40" name="search" color="#c0c0c0"></u-icon>
					</view>
					<view style="color: #c0c0c0;font-size: 34rpx;">搜索</view>
				</view>
			</view>
			<view v-show="myFirendList.length>0" style="background-color: #ffffff;">
				<u-index-list :scrollTop="scrollTop"  :active-color="'#3CC51F'"  :index-list="indexList" :offset-top="88">
					<view v-for="(item, index) in myFirendList" :key="index">
						<template v-if="item.optionFlag">
							<u-cell-group>
								<u-cell-item :arrow="false" @click="toApplyList()">
									<view 	slot="icon" class="u-flex u-row-center u-col-center u-m-r-20" 
											style="width: 80rpx;height: 80rpx;background-color: #ff9900;border-radius: 12rpx;">
										<u-icon name="/static/image/contact/tag1.png" :size="50" color="#ffffff"></u-icon>
									</view>
									<view slot="title" class="option-title" style="">新的朋友</view>
									<view slot="right-icon"  v-show="badgeNumber>0"
										class="u-flex u-row-center u-col-center" 
										style="width:40rpx;height: 40rpx;border-radius: 20rpx;background-color: #fa3534;">
										<view style="color: #FFFFFF;">{{badgeNumber}}</view>
									</view>
								</u-cell-item>
								<u-cell-item :arrow="false">
									<view 	slot="icon" class="u-flex u-row-center u-col-center u-m-r-20" 
											style="width: 80rpx;height: 80rpx;background-color: #ff9900;border-radius: 12rpx;">
										<u-icon name="/static/image/contact/tag6.png" size="50" color="#ffffff"></u-icon>
									</view>
									<view slot="title"  class="option-title">仅聊天的朋友</view>
								</u-cell-item>
								<u-cell-item :arrow="false">
									<view 	slot="icon" class="u-flex u-row-center u-col-center u-m-r-20" 
											style="width: 80rpx;height: 80rpx;background-color: #20c300;border-radius: 12rpx;">
										<u-icon name="/static/image/contact/tag4.png" size="50" color="#ffffff"></u-icon>
									</view>
									<view slot="title"  class="option-title">群聊</view>
								</u-cell-item>
								<u-cell-item :arrow="false">
									<view 	slot="icon" class="u-flex u-row-center u-col-center u-m-r-20" 
											style="width: 80rpx;height: 80rpx;background-color: #277fd6;border-radius: 12rpx;">
										<u-icon name="/static/image/contact/tag.png" size="50" color="#ffffff"></u-icon>
									</view>
									<view slot="title"  class="option-title">标签</view>
								</u-cell-item>
								<u-cell-item :arrow="false">
									<view 	slot="icon" class="u-flex u-row-center u-col-center u-m-r-20" 
											style="width: 80rpx;height: 80rpx;background-color: #277fd6;border-radius: 12rpx;">
										<u-icon name="/static/image/contact/tag3.png" size="50" color="#ffffff"></u-icon>
									</view>
									<view slot="title"  class="option-title">公众号</view>
								</u-cell-item>
							</u-cell-group>
						</template>
						<template v-else>
							<u-index-anchor :index="item.firstLetter"/>
							<view v-for="user in item.friends" :key="user.id" 
									class="list-cell" 
									@tap="linkToCard(user)" hover-class="message-hover-class">
								<u-image :src="user.headImg"  mode="aspectFill" width="80" height="80" border-radius="12">
									<view slot="error"
											class="u-flex u-row-center u-col-center  u-p-t-10"
											style="width: 80rpx;height: 80rpx;background-color: #f1f1f1;border-radius: 12rpx;">
										<view>
											<image src="/static/image/default/default-user/default-user.png"
													style="width: 50rpx;height: 50rpx;"></image>
										</view>
									</view>
								</u-image>
								<view  class="list-cell-name">{{user.friendName?user.friendName:user.userName}}</view>
							</view>
						</template>
				    </view>
				</u-index-list>
			</view>
		</view>
	</view>
</template>

<script>
import searchInput from '@/components/searchInput/index.vue';
import selectInput from '@/components/selectInput/selectInput.vue';
export default {
	components: { searchInput, selectInput},
	data() {
		return {
			selectShow:false,
			selectList: [
			{ id: '1', name: '发起群聊', icon: '/static/image/chat/option-1.png' },
			{ id: '2', name: '添加朋友', icon: '/static/image/chat/option-2.png' },
			{ id: '3', name: '扫一扫', icon: '/static/image/chat/option-3.png' },
			{ id: '4', name: '收付款', icon: '/static/image/chat/option-4.png' }],	
			scrollTop: 0,
			indexList:[],
			myFirendList:[],
			badgeNumber:0,
		};
	},
	onLoad:function(){
		let that=this;
		that.checkFriendApply();
		that.getMyFriendList();
		uni.$on("handleContactMessage", function(friendNotice) {
			console.log("监听到好友通知信息",friendNotice);
			that.getMyFriendList();
			that.checkFriendApply();
		})
	},
	onPullDownRefresh:function(){
		let that=this;
		that.checkFriendApply();
		that.getMyFriendList();
		setTimeout(function(){
			uni.stopPullDownRefresh();
		},5000)
	},
	onShow:function(){
	  let that=this;
	  let userId= that.vuex_userInfo.id;
	  //检查是否有人添加我为好友	
	  //that.checkFriendApply();
	},
	methods: {
		//打开或者关闭弹窗
		showSelect(){
			this.selectShow = !this.selectShow;
		},	
		//关闭弹窗
		closeSelect(){
			//小程序兼容
			this.selectShow = false;
		},
		//点击选择菜单
		checkSelect(index) {
			let that=this;
			if(index==0){
				
			}
			else if (index == 1) {
				this.toAddFriend();
				return;
			}
			else if(index == 2){
				
			}else{
				//收付款
			}
		},					
		toSearch:function(){
			this.$u.route({
				url:'/pages/search/common-search'
			})
		},			
		//检查是否有人添加我为好友  2022年1月17日21:21:13
		checkFriendApply:function(){
			let that=this;
			that.$u.api.imUser.unHandleFriendApply({}).then(res => {
				if(res.code==200&&res.data!=null){
					let badgeNumber=res.data;
					that.badgeNumber=Number(badgeNumber);
					if(badgeNumber==0){
						uni.removeTabBarBadge({
							index:1
						});
					}else{
						let number=badgeNumber.toString();
						uni.setTabBarBadge({
						  index: 1,
						  text: number
						})
					}
				}else{
					uni.removeTabBarBadge({
						index:1
					})
				}
			});
		},
		//初始化通讯录列表
		getMyFriendList:function(){
		   let that=this;
		   let param={};
		    that.$u.api.imUser.getMyFriendList(param).then(res => {
				console.log("获取通讯录结果",res);
				if(res.code==200){
					let data=res.data;
					let indexList= data.myFriendsIndexList;
					if(indexList!=null&&indexList!=undefined){
						that.indexList=indexList;
					}else{
						that.indexList=[];
					}
					let myFriendList= data.myFriendList;
					if(myFriendList!=null&&myFriendList!=undefined){
						that.myFirendList=myFriendList;
					}else{
						that.myFirendList=[];
					}
					let item={
						firstLetter:'🔍',
						friends:[],
						optionFlag:true,
					};
					that.indexList.unshift("🔍");
					that.myFirendList.unshift(item);
				}
				uni.stopPullDownRefresh();
			})	   
		},
		
		//跳转个人信息界面
		linkToCard(friend){
			console.log("跳转朋友信息中心",friend);
			this.$u.route({
			  url: '/pages/tabbar/contact/friends/friend-home',
			  params:{
				  friendId:friend.friendId,
			  },
			})
		},
		//查询申请列表
		toApplyList:function(){
			let that=this;
			this.$u.route({
			  url: '/pages/tabbar/contact/friends/friend-apply-list',
			});
		},
		//去添加好友
		toAddFriend:function(){
			this.$u.route({
				url: '/pages/tabbar/contact/to-add-friend-index',
			})
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	}
};
</script>

<style lang="scss" scoped>
.content {
	height: 100%;
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 30rpx;
		overflow: hidden;
		color: #323233;
		font-size: 28rpx;
		line-height: 48rpx;
		background-color: #fff;
		align-items: center;
		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 12rpx;
			flex: 0 0 76rpx;
		}
		&-name{
			padding-left: 28rpx;
			font-size: 30rpx;
			color: #000000;
		}
	}
	.u-cell{
		padding: 10px 16px;
	}
	/* .u-border-bottom:after{
		left: 16%;
	} */
	.option-title{
		color: #000000;font-size: 32rpx;
	}
	
}
</style>
<style>
	
	page{
		background-color: #f1f1f1;
	}
</style>